<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title>相片</title>

<link rel="stylesheet" href="../css/sunny/fontsize1.1/jquery-ui-1.10.4.custom.css">
	
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/jquery-ui-1.10.4.custom.js"></script>
<script src="../js/jquery.waterwheelCarousel.js"></script>

<style>

body {
	overflow-x:hidden;
}

.waterwheelcarousel {
    height: 10px;
}

.waterwheelcarousel img {
    display: hidden; /* hide images until carousel prepares them */
    cursor: pointer; /* not needed if you wrap carousel items in links */
}

.block {
	margin-top:60px;
	margin-bottom:120px;
}
</style>

<script>

$(function() {
	 $(".waterwheelcarousel").waterwheelCarousel({
	      // include options like this:
	      // (use quotes only for string values, and no trailing comma after last option)
	      // option: value,
	      // option: value
		  separation: 100,
		  flankingItems: 4,
		  clickedCenter: function($clickedItem) {
		      // $clickedItem is a jQuery wrapped object describing the image that was clicked.
		      var imageUrl = $clickedItem.attr('src');
		      imageUrl = imageUrl.slice(10, -4);
		      imageUrl = "#" + imageUrl;
		      parent.parent.$(imageUrl).click();
		  }
	 });
	 
});

</script>
</head>

<body>

	<h1>您的所有相片</h1>
	
	<div class="block">
	<span>小白</span>
	<div class="waterwheelcarousel">
	<img src="../images/cat1.jpg" alt="Image 1" width="120" height="120" />
	<img src="../images/cat.jpg" alt="Image 2" width="120" height="120" />
	<img src="../images/paw-icon.jpg" alt="Image 3" width="120" height="120" />
	<img src="../images/cat1.jpg" alt="Image 4" width="120" height="120" />
	<img src="../images/paw-icon.jpg" alt="Image 5" width="120" height="120" />
	<img src="../images/cat.jpg" alt="Image 6" width="120" height="120" />
	<img src="../images/cat.jpg" alt="Image 7" width="120" height="120" />
	</div>
	</div>

	<div class="block">
	<span>小白</span>
	<div class="waterwheelcarousel">
	<img src="../images/cat1.jpg" alt="Image 1" width="120" height="120" />
	<img src="../images/cat.jpg" alt="Image 2" width="120" height="120" />
	<img src="../images/paw-icon.jpg" alt="Image 3" width="120" height="120" />
	<img src="../images/cat1.jpg" alt="Image 4" width="120" height="120" />
	<img src="../images/paw-icon.jpg" alt="Image 5" width="120" height="120" />
	</div>
	</div>
	
	<div class="block">
	<span>小白</span>
	<div class="waterwheelcarousel">
	<img src="../images/cat1.jpg" alt="Image 1" width="120" height="120" />
	<img src="../images/cat.jpg" alt="Image 2" width="120" height="120" />
	<img src="../images/paw-icon.jpg" alt="Image 3" width="120" height="120" />
	<img src="../images/cat1.jpg" alt="Image 4" width="120" height="120" />
	<img src="../images/paw-icon.jpg" alt="Image 5" width="120" height="120" />
	</div>
	</div>
</body>

</html>